//引入 gulp
const gulp = require('gulp');
//引入 gulp-babel
const babel = require('gulp-babel');
//引入 gulp-browserify
const browserify = require('gulp-browserify');
const rename = require('gulp-rename');
//导入 uglify
const uglify = require('gulp-uglify');
//导入 less 插件
const less = require('gulp-less');
//导入自动添加前缀的插件
const LessAutoprefix = require('less-plugin-autoprefix');
//实例化对象                             浏览器        最新的两个版本
const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });
//导入 concat 插件
const concat = require('gulp-concat');
//导入压缩 css 的插件
const cssmin = require('gulp-cssmin');
//导入压缩 html 的插件
const htmlmin = require('gulp-htmlmin');
//gulp 热加载功能包
const livereload = require('gulp-livereload');
//启动 http 服务
const connect = require('gulp-connect');
//自动打开浏览器
const opn = require('opn');

//创建任务
gulp.task('hello', async () => {
    console.log('hello Gulp');
});

//创建任务 语法转换
gulp.task('babel', () => {
    //pipe 管道
    return gulp.src('./src/js/*.js')
        .pipe(babel({ //进行语法转换
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('build/js')) // 输出到指定目录
        .pipe(livereload())  //1. 在所有可能要执行任务后面加上 .pipe(livereload());
});

//browserify 打包操作
gulp.task('browserify', function () {
    return gulp.src('./build/js/app.js')
        .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
        .pipe(rename('bundle.js'))			//为了防止冲突将文件重命名
        .pipe(gulp.dest('build/js'))
        .pipe(livereload())
});

//uglify 压缩 js 文件
gulp.task('uglify', function () {
    return gulp.src('build/js/bundle.js')
        .pipe(uglify())  //压缩js
        .pipe(rename('dist.min.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(livereload())
});

//批量执行任务
gulp.task('js', gulp.series('babel', 'browserify', 'uglify'));

//less 语法转换的任务
gulp.task('less', function () {
    return gulp.src('./src/less/*.less')
        .pipe(less({
            plugins: [autoprefix]//自动扩展前缀
        }))
        .pipe(gulp.dest('./build/css'))
        .pipe(livereload());
});

//concat 合并 css 的任务
gulp.task('concat', function () {
    return gulp.src('./build/css/*.css')
        .pipe(concat('built.css'))
        .pipe(gulp.dest('./build/css/concat'))
        .pipe(livereload());
});

//cssmin 压缩 css 文件
gulp.task('cssmin', function () {
    return gulp.src('build/css/concat/built.css')
        .pipe(cssmin())
        .pipe(rename('dist.min.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(livereload());
});

//批量执行样式任务
gulp.task('style', gulp.series('less', 'concat', 'cssmin'));

//压缩 html 文件
gulp.task('htmlmin', () => {
    return gulp.src('src/index.html')
        .pipe(htmlmin({
            collapseWhitespace: true,//去除空格
            removeComments: true //去除注释
        }))
        .pipe(gulp.dest('dist'))
        .pipe(livereload());
});

//批量执行总任务
gulp.task('total', gulp.series('js', 'style', 'htmlmin'));

//watch 监视  default 默认
gulp.task('default', function () {
    //2. 启动热加载服务
    livereload.listen();
    //3. 通过自己服务器打开项目，自动刷新
    connect.server({
        root: 'dist',
        port: 3000,
        livereload: true
    });
    //4. 自动打开浏览器
    opn('http://localhost:3000/index.html');
    //5. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
    gulp.watch('src/less/*.less', gulp.series(['less', 'concat', 'cssmin']));
    gulp.watch('./src/js/*.js', gulp.series(['babel', 'browserify', 'uglify']));
    gulp.watch('./src/index.html', gulp.series('htmlmin'));
});
